<template>
  <div style="display: inline-block; margin: 10px 10px;">
    <el-card :body-style="{ padding: '0px' }" class="teacher-box">
      <span slot="header" style="font-size:16px;"> {{ hname }} </span>
      
      <div class="box-img">
        <img
          :src="avatar"  
          style="height: 100px;border-radius:5px;"
        />
      </div>

      <div class="box-text"> 
        <p><strong>Chinese name:  </strong> {{name}} </p>
        <p><strong>Time:  </strong> {{time}} </p>
        <p><strong>Thesis:  </strong>  {{thesis}} </p>
        <p v-if="destination !== ''"><strong>Graduation Destination:  </strong>{{destination}}</p>
      </div>

      

    </el-card>
  </div>
</template>

<script>
export default { 
  props: {
    hname : {type:String},
    name : {type:String},
    time : {type:String},
    thesis : {type:String},
    destination : {type:String,default:""},
    imgUrl: {type:String,default:""},

  },
  data() {
    return {
      avatar: "http://rfly.buaa.edu.cn/images/people/default.png"
    };
  },
  created(){
    if (this.imgUrl !== "") {
      this.avatar = this.imgUrl
    }
  }

};
</script>

<style lang="less" scoped>
@img-width: 1200px;
@img-height: 170px;

.el-card{
  width: @img-width;height: @img-height; border-radius:20px;
  background-color: #99ccff;
  /deep/.el-card__header {text-align: center; padding: 8px 20px; border-bottom:none;font-weight: bold;}

}

.box-img{ float:left; margin: 0px 20px; }
.box-text{ font-size:16px; text-align: left;line-height: 24px;}

</style>
